<template>
  <div
    v-if="visible"
    class="context-menu"
    :style="{ left: position.x + 'px', top: position.y + 'px' }"
  >
    <div class="menu-item" @click="handleAdd">添加设备</div>
    <div class="menu-item" @click="handleEditor">编辑</div>
    <div class="menu-item" @click="handleDelete">删除</div>
  </div>

  <equipmentForm v-model="showEquipmentForm" :info="info"></equipmentForm>
</template>

<script setup lang="ts">
import equipmentForm from '@renderer/pages/titlebar/menu/add/equipmentForm.vue'
import { Vector3 } from 'three'
import { ref } from 'vue'

export interface ContentMenuInfo {
  name: string
  position: Vector3
}

const visible = ref(false)
const position = ref({ x: 0, y: 0 })
const info = ref()

const show = (x: number, y: number, obj) => {
  position.value = { x, y }
  console.log(obj)
  info.value = {
    name: obj.object.name,
    position: obj.point
  }
  visible.value = true
}

const hide = () => {
  visible.value = false
}

const handleAdd = () => {
  showEquipmentForm.value = true
  console.log(info.value)
  hide()
}
const handleEditor = () => {
  console.log(info.value)
  hide()
}
const handleDelete = () => {
  console.log(info.value)
  hide()
}

const showEquipmentForm = ref(false)

// 暴露方法给父组件
defineExpose({
  show,
  hide
})
</script>

<style scoped>
.context-menu {
  position: fixed;
  background: var(--main-background);
  border: 1px solid var(--active-background);
  border-radius: 4px;
  padding: 4px 0;
  min-width: 120px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  font-size: 14px;
}

.menu-item {
  padding: 4px 8px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.menu-item:hover {
  background-color: var(--active-background);
}
</style>
